<template>
<div>
 <div v-if="$route.name == 'rooms'">
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item >
        <el-button
          type="primary"
          @click="add"
          icon="delete"
        >增加</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="roomList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row>
      <el-table-column align="center" label="ID" >
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="房间名" >
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
         <template slot-scope="scope">
          <el-button
            size="small"
            @click="remove(scope.$index, scope.row)">
           删除
          </el-button>
         </template>
      </el-table-column>
      <el-table-column label="编辑" align="center">
        <template slot-scope="scope">
          <el-button
            size="small"
            @click="enter(scope.$index, scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
 </div>
  <div v-else>
      <router-view></router-view>
    </div>
</div>
</template>

<script>
import { getRoomList,addRoom,removeRoom } from '@/api/room'

export default {

  data() {
    return {
      roomList: [],
      listLoading: true
    }
  },
  created() {
    this.fetchData()
  },
  methods: {

    async add(){

      this.listLoading = true
      let room = await addRoom("abc");
      console.log(room)
      this.roomList.push(room);
      this.listLoading = false
    },
    async remove(index ,row){
       this.listLoading = true
      await removeRoom(row.id);
      this.roomList.splice(index,1);
       this.listLoading = false
    },
    async fetchData() {
      this.listLoading = true
      let datas  = await getRoomList();
      console.log(datas)
      this.roomList = datas;
      this.listLoading = false
    },

    enter(index,row){
      this.$router.push({path:"/rooms/room",query:{roomId:row._id}});
    }
  }
}
</script>
